<template>
  <div style="width: 230px; overflow: hidden;">
    <el-col
      style="overflow-y:scroll;"
      :style="{height:heightLength+'px'}"
      class="el-left-menu"
      :span="3"
    >
      <el-menu
        style="height:120%;"
        :default-active="active"
        background-color="#0099ff"
        text-color="#fff"
        class="el-menu-vertical-demo"
        router
      >
        <el-submenu v-for="(item, index) in leftMenuList" :key="index" :index="item.menu_href">
          <!-- title的模板 -->
          <template slot="title">
            <i :class="item.icon" style="color: #fff;"></i>
            {{item.menuName}}
          </template>

          <el-menu-item-group :key="list.menuUrl" v-for="list in item.sysMenuList">
            <el-menu-item :index="list.menu_href">{{list.menuName}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!-- <el-submenu v-for="(item, index) in routeList" :key="index" :index="item.menuName">
        <template slot="title">
          <span>{{item.menuName}}</span>
        </template>
        <el-menu-item
          v-if="item.sysMenuList.length"
          v-for="list in item.sysMenuList"
          :key="list.menuName"
          :index="list.menu_href"
        >{{list.menuName}}</el-menu-item>
        </el-submenu>-->
      </el-menu>
    </el-col>
  </div>
</template>

<script>
// let CONSTANT = require("../../constant/constant.js");
// let common = require("../../common.js");
// var routerList = require("./router-leftBar.js");
export default {
  data() {
    return {
      active: "",
      scroll: "",
      routeList: [],
      heightLength: "",
      leftMenuList: [],
    };
  },

  //未用到的方式
  mounted() {
    // this.routeList = JSON.parse(sessionStorage.getItem("menus")); //获取当前菜单缓存
    console.log("菜单", this.routeList);
    // this.leftPermission();
    //菜单滚动
    window.addEventListener("scroll", () => {
      let scrollHeight = document.body.scrollHeight;
      this.heightLength = scrollHeight - 80;
    });
  },
  created() {
    //   this.leftPermission();
    //      this.activePath();
    this.heightLength = document.body.scrollHeight;
  },

  mounted() {
    //测试 设置左导航数据

    this.leftMenuList = [
      {
        menuName: "商铺管理",
        menuUrl: "",
        menu_href: "1",
        icon: "el-icon-s-home",
        sysMenuList: [
          {
            menuName: "商铺列表",
            menuUrl: "/store_list",
            menu_href: "/store_list",
          },
        ],
      },
      {
        menuName: "商品管理",
        menuUrl: "",
        menu_href: "2",
        icon: "el-icon-s-order",
        sysMenuList: [
          {
            menuName: "商品列表",
            menuUrl: "commodity_list",
            menu_href: "/commodity_list",
          },
        ],
      },
      {
        menuName: "任务管理",
        menuUrl: "",
        menu_href: "3", //展开所有此标志的导航，如下一组也是234，则一起展开
        icon: "el-icon-s-unfold",
        sysMenuList: [
          {
            menuName: "发布任务",
            menuUrl: "/aiLiuLiang_launch_mission/first",
            menu_href: "/aiLiuLiang_launch_mission/first",
            icon: "el-icon-menu",
          },
          {
            menuName: "爱流量业务",
            menuUrl: "/aiLiuLiang_manager",
            menu_href: "/aiLiuLiang_manager",
          },
          {
            menuName: "爱分仓业务",
            menuUrl: "/aiFenCang_manager",
            menu_href: "/aiFenCang_manager",
          },
          {
            menuName: "爱试用业务",
            menuUrl: "/aiShiYong_manager",
            menu_href: "/aiShiYong_manager",
          },
        ],
      },
      // {
      //   menuName: "分仓管理",
      //   menuUrl: "",
      //   menu_href: "4",
      //   sysMenuList: [
      //     {
      //       menuName: "任务列表",
      //       menuUrl: "/task_index",
      //       menu_href: "/task_index",
      //     },
      //     {
      //       menuName: "任务完成",
      //       menuUrl: "/task_list",
      //       menu_href: "/task_list",
      //     },
      //     {
      //       menuName: "任务异常",
      //       menuUrl: "/task_verify",
      //       menu_href: "/task_verify",
      //     },
      //   ],
      // },
      {
        menuName: "我的账户",
        menuUrl: "",
        menu_href: "5",
        icon: "el-icon-s-custom",
        sysMenuList: [
          // {
          //   menuName: "角色管理",
          //   menuUrl: "/fund_transaction_record",
          //   menu_href: "/fund_transaction_record",
          // },
          // {
          //   menuName: "管理员管理",
          //   menuUrl: "/withdraw_verify",
          //   menu_href: "/withdraw_verify",
          // },
          // {
          //   menuName: "分享佣金",
          //   menuUrl: "/share_money",
          //   menu_href: "/share_money",
          // },
          {
            menuName: "充值",
            menuUrl: "/charge",
            menu_href: "/charge",
          },
        ],
      },
    ];

    //正式的请求方式
    this.leftPermission();
  },
  watch: {},
  methods: {
    leftPermission() {
      //切换导航请求方式
      // let url = CONSTANT.ADMIN.GETMENULIST;
      let data = {};

      // common.get(url, null, null, res => {
      //   if (res.code == 200) {
      //     this.leftMenuList = res.data;
      //     console.log("左侧菜单", this.leftMenuList);
      //     //获取左侧导航菜单
      //   }
      //   this.activePath();
      // });
    },
    activePath() {
      //找到当前菜单项
      if ("/" == this.$route.path) {
        this.$nextTick(function () {
          //nextTick数据修改
          this.active = this.$route.path;
        });
      } else {
        this.$nextTick(function () {
          this.active = this.$route.path;
        });
      }
      console.log(this.$route, "aaa");
    },
    //    activePath(){
    //        this.active = this.$router.currentRoute.path
    //    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
.el-left-menu {
  height: 100%;
  width: 230px;
}
//隐藏滚动条
.el-left-menu::-webkit-scrollbar {
  width: 0 !important;
}
.el-menu-vertical-demo {
  height: 100%;
  box-sizing: border-box;
  padding-top: 10px;
}

.el-menu-item {
  min-width: auto !important;
  padding-left: 55px !important;
}
.el-menu-item-group__title {
  padding-top: 0px !important;
}

.el-submenu {
  margin-left: 20px;
  padding-right: 20px;
}

.el-submenu__icon-arrow {
  color: #fff !important;
}

.el-menu-item {
  transition: all 0.2s ease-in-out;
  color: #fff !important;
  a {
    display: block;
    color: #bfcbd9;
  }
  //菜单悬停
  &.is-active {
    color: #fff !important;
    border-left: 5px solid #dfdfdf !important;
    background-color: #3bb1ff !important;
  }
}

.el-menu-item:hover {
  background-color: #3bb1ff !important;
  color: #fff !important;
  transition: all 0.2s ease-in-out;
}

.el-submenu__title {
  transition: all 0.2s ease-in-out;
  color: #fff !important;
}

.el-submenu__title:hover {
  background-color: #3bb1ff !important;
  color: #fff !important;
  transition: all 0.3s ease-in-out;
  .el-submenu__icon-arrow {
    color: #fff !important;
  }
}
</style>
